:root {
  --onsite-remote--onsite: rgb(0, 0, 150);
  --onsite-remote--remote: rgb(120, 0, 0);
}

.onsite-remote--note {
  padding: 1rem;
  border: 1px solid currentColor;
  margin-top: 2rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.onsite-remote--note:has(+.onsite-remote--onsite) {
  color: var(--onsite-remote--onsite);
}

.onsite-remote--note:has(+.onsite-remote--remote) {
  color: var(--onsite-remote--remote);
}
.onsite-remote--note:has(+[data-detected="true"]) h2::after {
  content: "✅ (This device)";
  font-weight: normal;
}

.onsite-remote--onsite {
  display: none;
}
.onsite-remote--onsite[data-detected="true"] {
  display: block;
}

.onsite-remote--note+.onsite-remote--onsite,
.onsite-remote--note+.onsite-remote--remote {
  display: block;
  margin-top: 1rem;
  margin-bottom: 2rem;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem;
  min-height: 1rem;
}

.onsite-remote--note+.onsite-remote--onsite {
  border-color: var(--onsite-remote--onsite);
  display: block !important;
}

.onsite-remote--note+.onsite-remote--remote {
  border-color: var(--onsite-remote--remote);
  display: block !important;
}